/* 引用图片高度设置为28px，就是页面最上方像屋檐一样的黑色图 */
.headtop {
  height: 28px;
}

.bg {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(45deg, #1f1f1f, #555555);
}

/* 整个登录框的css，并使用绝对定位居中 */
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
  width: 300px;
  height: 300px;

  h1 {
    color: white;
    text-shadow: 0px 10px 8px #555555;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
  }

  /* 两个输入框的css，border属性设置边框线粗细以及颜色，border-radius设置边框的圆角角度 */

  input {
    padding: 10px;
    width: 100%;
    color: white;
    margin-bottom: 10px;
    background-color: #555555;
    border: 1px solid black;
    border-radius: 4px;
    letter-spacing: 2px;
  }

  .captcha {
    input {
      width:60%;
    }

    img {
      height: 44px;
      width: 90px;
      float: right;
      cursor: pointer;
    }
  }

  /* 登录按钮的css，cursor:pointer当鼠标移到按钮上面时变成小手形状 */
  form button {
    width: 100%;
    padding: 10px;
    background-color: #555555;
    border: 1px solid black;
    border-radius: 4px;
    cursor: pointer;
  }
}
